<template>
	<view class="wrapForm">
		<view class="bgLine"></view>
		<view class="wrapFormBody pL15 pR15 pT15 myInfoForm">
			<u-form :label-width="160" :label-style="{'font-size':'30rpx'}" class="xf-wrap-form" ref="dataForm"
				:rules="rules" :model="formData" :error-type="['toast']">
				<u-form-item label="头像" prop="comProfile">
					<view class="w100 flex jst-end">
						<button class="myInfoHeadBtn flex jst-end alg-center" open-type="chooseAvatar"
							@chooseavatar="onChooseAvatar">
							<block v-if="formData.comProfile">
								<image :src="xf.getImgUrl(formData.comProfile)"></image>
							</block>
							<block v-else>
								<view class="uploadHeadBtn flex jst-center alg-center">
									<u-icon name="camera" size="58" color="#999"></u-icon>
								</view>
							</block>
						</button>
					</view>
				</u-form-item>
				<u-form-item :required="true" label="企业名称" prop="comName">
					<u-input :input-align="'right'" placeholder="请输入企业名称" v-model="formData.comName" />
				</u-form-item>
				<u-form-item label="实名认证" prop=""
					@click="xf.onlineUtils.route('/pages/companyPage/subpackge/my/smrz/smrz')">
					<view class="w100 flex jst-end font14">
						<view v-if="rzInfo==1">已认证</view>
						<view class="u-red mR5" v-else>未认证</view>
						<u-icon name="arrow-right" :color="'#C0C4CC'"></u-icon>
					</view>
				</u-form-item>
				<u-form-item :required="true" label="企业地址" prop="address">
					<view class="w100 flex alg-center jst-between">
						<view style="width: calc(100% - 46rpx);"><u-input :disabled="true" inputAlign="right"
								class="t-right" placeholder="请选择地址" v-model="formData.address" />
						</view>
						<image @click="chooseLocation" class="imgW36" :src="resources.posIcon" mode=""></image>
					</view>
				</u-form-item>
				<u-form-item :required="true" label="详细地址" prop="comBelongAddress">
					<view class="w100 ">
						<u-input class="t-right" inputAlign="right" placeholder="请输入详细地址"
							v-model="formData.comBelongAddress" />
					</view>
				</u-form-item>
				<u-form-item :required="true" label="所属驿站" inputAlign="right" prop="organizationName">
					<view class="w100 ">
						<u-input type="select" inputAlign="right" class="t-right" placeholder="请选择所属驿站"
							v-model="formData.organizationName" @click="showPicker" />
					</view>
				</u-form-item>
				<u-form-item label-align="top" label="公司风貌" prop="comAppearance" :border-bottom="false">
					<view class="w100 flex flex-wrap">
						<xfUploadImg v-model="formData.comAppearance" :limit="9" />
					</view>
				</u-form-item>
				<u-form-item label-position="top" label="公司介绍" prop="comIntroduction" :border-bottom="false">
					<u-input
						:custom-style="{background:'#F8F8F8',padding:'30rpx 30rpx !important',borderRadius:'20rpx'}"
						type="textarea" :input-align="'left'" v-model="formData.comIntroduction"></u-input>
				</u-form-item>
			</u-form>
		</view>

		<view class="flex jst-center bottomW">
			<view class="pointer rightNowPay u-f font15 t-center" @click="saveMyInfo">
				保存
			</view>
		</view>
		<xfTreePicker :defalutValue="formData.organizationId" :selectParent="false" ref="treePicker" :multiple="false"
			@select-change="selectChange" title="所属驿站" :localdata="deptLis" valueKey="id" textKey="name"
			codeKey="orgCode" childrenKey="children"></xfTreePicker>

	</view>
</template>

<script>
	import {
		getComOrUserInfo,
		editUserInfo
	} from "@/api/companyInterface/user.js"
	import {
		chooseLocal
	} from "@/libs/map.js"
	import {
		getOrgTree
	} from "@/api/common.js"
	import selAreaMinxs from "@/utils/selArea.js"

	export default {
		mixins: [selAreaMinxs],
		components: {},
		data() {
			return {
				formData: {
					"id": "",
					"comName": "",
					"comBelongAddress": "",
					"comProfile": "",
					"comAppearance": "",
					"comIntroduction": "",
					organizationName: "",
					organizationId: "",
					"provinceId": "",
					"provinceName": "",
					"cityId": "",
					"cityName": "",
					"areaId": "",
					"areaName": "",
					"townId": "",
					"townName": "",
					comLatitude: "",
					comLongitude: "",
					address: ""
				},
				rzInfo: null,
				rules: {
					comName: [{
						required: true,
						message: '请输入企业名称',
						trigger: ['change', 'blur'],
					}],
					address: [{
						required: true,
						message: '请选择企业地址',
						trigger: ['change', 'blur'],
					}],
					comBelongAddress: [{
						required: true,
						message: '请输入详细地址',
						trigger: ['change', 'blur'],
					}],
					organizationName: [{
						required: true,
						message: '请选择所属服务站点',
						trigger: ['change', 'blur'],
					}]


				},
				deptLis: [],
			}
		},
		onReady() {
			this.$refs.dataForm.setRules(this.rules);
		},
		onLoad() {
			this.getTreeOpt()
			this.getUserInfoOpt()
		},
		methods: {
			async onChooseAvatar(e) {
				let that=this;
				let url=await this.baseStore.getUploadUrlApi()
				let tempFilePath=e.detail.avatarUrl;
				uni.uploadFile({
					url:url,
					filePath:tempFilePath,
					name:'file',
					header:{
						"X-Access-Token":uni.getStorageSync('token')
					},
					success(res) {
						let result=res.data&&JSON.parse(res.data)
						if(result.success){
							console.log(result.message)
							that.formData.comProfile=result.message
						}
						console.log(res.data)
					},
					fail(err) {
						console.log(err)
					}
				})
			},
		
			showPicker() {
				this.$refs.treePicker._show();
			},
			//监听选择（ids为数组）
			selectChange(ids, code, names) {
				this.formData.organizationName = names;
				this.formData.organizationId = ids;
				this.selData = [ids]
			},
			async chooseLocation() {
				let res = await chooseLocal();
				let r = res.address + res.name;
				let d = this.regionDiscern(r)
				this.formData.provinceId = d.data.province.code;
				this.formData.cityId = d.data.city.code;
				this.formData.areaId = d.data.area.code;
				this.formData.provinceName = d.data.province.name;
				this.formData.cityName = d.data.city.name;
				this.formData.areaName = d.data.area.name;
				this.formData.address = this.formData.provinceName + this.formData.cityName + this.formData.areaName
				this.formData.comLatitude = res.latitude;
				this.formData.comLongitude = res.longitude;
				this.formData.comBelongAddress = d.data.address;

			},
			getTreeOpt() {
				getOrgTree().then(res => {
					this.deptLis = res.result[0].children;
				})
			},
			saveMyInfo() {

				let data = this.xf.deepClone(this.formData);
				if (data.comAppearance && data.comAppearance.length > 0) {
					data.comAppearance = data.comAppearance.map(obj => obj.url).join(',')
				}
				this.$refs.dataForm.validate(valid => {
					if (valid) {
						editUserInfo(data).then(res => {
							if (res.success == true) {
								this.xf.onlineUtils.toast("保存成功！", 2000)
								setTimeout(() => {
									uni.switchTab({
										url: "/pages/companyPage/my/index"
									})
								}, 2000)
								// this.getUserInfoOpt()

							}
						}).catch(err => {

						})
					} else {
						console.log('验证失败');
					}
				});

			},
			getUserInfoOpt() {
				getComOrUserInfo().then(res => {
					let info = res.result;
					let arr = "";
					if (info.comAppearance && info.comAppearance.length > 0) {
						let d = info.comAppearance.split(',')
						arr = d.map(v => {
							return {
								url: v
							}
						})
					}
					this.formData = {
						"id": info.id,
						"comName": info.comName,
						"comBelongAddress": info.comBelongAddress,
						"comProfile": info.headSculpturePath,
						"comAppearance": arr,
						"comIntroduction": info.comIntroduction,
						organizationName: info.organizationName,
						organizationId: info.organizationId,
						"provinceId": info.provinceId,
						"provinceName": info.provinceName,
						"cityId": info.cityId,
						"cityName": info.cityName,
						"areaId": info.areaId,
						"areaName": info.areaName,
						comLatitude: info.latitude,
						comLongitude: info.longitude,
					}
					this.formData.address = this.formData.provinceName + this.formData.cityName + this.formData
						.areaName
					this.rzInfo = info.izAuthentication;

				})
			},
		}
	}
</script>
<style lang="scss">
	page {

		/* #ifdef MP-WEIXIN */
		height: 100%;
		/* #endif */
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.wrapForm {

		min-height: 100%;

		.wrapFormBody {
			margin-top: -30rpx;
			border-radius: 40rpx 40rpx 0 0;
			background: #fff;
		}

		padding-bottom: 200rpx;

		.uni-forms-item {
			align-items: center !important;
		}

		.uni-input-placeholder {
			text-align: right !important;
			color: #BDBDBD;
		}
	}

	.bgLine {
		background-color: #EBF0FF;
		width: 100%;
		height: 60rpx;
	}

	.bottomW {
		position: fixed;
		bottom: 40rpx;
		width: 100%;
		left: 0;
	}

	.rightNowPay {
		width: 670rpx;
		height: 100rpx;
		line-height: 100rpx;
		background: #3291F8;
		border-radius: 30rpx;

	}
</style>